<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto 0;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }

        .button {
            text-align: center;
        }

        button {
            margin: 0 auto;
            width: 200px;

        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">00</span>
        <span>:</span>
        <span id="spanMin">06</span>
        <span>:</span>
        <span id="spanSec">10</span>
    </div>
    <div class="button"><button disabled>开始秒杀</button></div>

    <script>
        // 实现秒杀效果有两种（时间效果）
        // 整点秒杀：到了具体的时间点开始实现秒杀，时间不断增长
        // 倒计时秒杀：时间从现在开始不断减少

        // 需求：倒计时开始，到了 00 : 00 : 00 可以秒杀（按钮可以点）

        /*
            思路分析
            1. 获取相关元素
            2. 定时器
            2.1 拿到当前的时间信息（字符串）：转换成数字  parseInt()
            2.2 秒 减去 1  秒的范围：00 - 59
            2.3 判定：秒如果小于0   分 减去 1 ，秒 等于59
            2.4 判定：分如果小于0   时 减去 1 ，分 等于59
            2.5 前导0补充：时分秒 小于10的时候，前面要补充一个字符串'0'
            2.6 将数据写回到页面中：innerText/innerHTML
            2.7 判定：三个都为0，开启秒杀，清除定时器
        */

        // 1. 获取相关元素
        let h = document.getElementById('spanHour');
        let m = document.getElementById('spanMin');
        let s = document.getElementById('spanSec');
        let btn = document.querySelector('button');

        // 2. 定时器

        let timeId = setInterval(function () {
            // 2.1 拿到当前的时间信息（字符串）：转换成数字  parseInt()
            let hh = parseInt(h.innerText);
            let mm = parseInt(m.innerText);
            let ss = parseInt(s.innerText);

            // 2.2 秒 减去 1  秒的范围：00 - 59
            ss--;
            // console.log(ss);
            // 2.3 判定：秒如果小于0   分 减去 1 ，秒 等于59
            if (ss < 0) {
                mm--;
                ss = 59;
            }

            // 2.4 判定：分如果小于0   时 减去 1 ，分 等于59
            if (mm < 0) {
                hh--;
                mm = 59;
            }
            // 2.5 前导0补充：时分秒 小于10的时候，前面要补充一个字符串'0'
            if (hh < 10) { hh = '0' + hh; }
            if (mm < 10) { mm = '0' + mm; }
            if (ss < 10) { ss = '0' + ss; }

            // 2.6 将数据写回到页面中：innerText / innerHTML
            h.innerText = hh;
            m.innerText = mm;
            s.innerText = ss;

            // 2.7 判定：三个都为0，开启秒杀，清除定时器
            if (hh == 0 && mm == 0 && ss == 0) {
                clearInterval(timeId);
                btn.disabled = false;
            }
        }, 1000);

        // 细节
        // 1. 为了方便计算：拿到数据后要转换成数字
        // 2. 数据回写的时候，应该让时分秒保持2位数字

    </script>

</body>

</html>